<template>
  <!-- 报名页面 -->
  <div v-loading="pageLoading" class="game_page">
    <!-- 标题 -->
    <div class="confirmInfo_title gl_clear">申办分站赛</div>

    <div>
      <!-- 步骤条 -->
      <el-steps class="step_mb" :active="stepActive">
        <el-step v-for="(item, index) in stepList" :key="index" :title="item.title" :description="item.description" />
      </el-steps>

      <!-- 组件 -->
      <div v-loading="!(UserType && gameInfo)" class="component_wrap">
        <template v-if="UserType && gameInfo">
          <component
            :is="item.component"
            v-for="(item, index) in stepList"
            v-show="stepActive === index"
            :key="index"
            :ref="'entry-' + item.component"
            :is-show="stepActive === index"
            :user-type="UserType"
            :current-user-type="'Delegation'"
            :dict="dict"
            :district="cache.district"
            :game-info="gameInfo"
            :user-team-info="userTeamInfo"
            :required-id-data="requiredIdData"
            :competition-request-success-v-o="competitionRequestSuccessVO"
            @onCompetitionRequestSuccess="onCompetitionRequestSuccess"
            @onPrevStep="doPrevStep"
            @onNextStep="doNextStep"
            @reGetUserType="reGetUserType"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import {
  api_GET_EventsManagementUserUserType, // 获取当前用户注册类型
  api_GET_EventsManagementDelegationId // 获取团体注册信息
} from '@/extend/api/gameswaggerApi/app';

import StepByInfo from './components/stepByInfo';
import StepByData from './components/stepByData';
import StepByMaterial from './components/stepByMaterial';
import StepBySuccess from './components/stepBySuccess';

export default {
  name: 'LeagueEnter',
  components: {
    StepByInfo,
    StepByData,
    StepByMaterial,
    StepBySuccess
  },
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      pageLoading: false, // 关键性Loading,不可轻易false
      stepActive: 0, // 当前步骤位置
      stepList: [ // 步骤条数据
        {
          title: '确认申办机构',
          description: '',
          component: 'step-by-info'
        },
        {
          title: '填写申办资料',
          description: '',
          component: 'step-by-data'
        },
        {
          title: '等待审核',
          description: '',
          component: 'step-by-material'
        },
        {
          title: '申办成功',
          description: '',
          component: 'step-by-success'
        }
      ],
      requiredIdData: { // 后续步骤需要的ID，此页面不要调用
        delegationId: '',
        registerId: ''
      },
      userTeamInfo: null, // 团体信息
      competitionRequestSuccessVO: {}
    };
  },
  computed: {
    ...mapState({
      UserType: state => state.user.currentUserType,
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  watch: {
    'UserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.requiredIdData.registerId = val.registerId;
          this.requiredIdData.delegationId = val.delegationId;
          this.getUserTeamInfo();
        }
      }
    }
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    reGetUserType() {
      this.pageLoading = true;
      api_GET_EventsManagementUserUserType()
        .then(res => {
          this.$store.dispatch('user/getSaveCurrentUserType', res);
          this.pageLoading = false;
        });
    },
    // 获取团体注册信息
    getUserTeamInfo() {
      if (this.UserType.delegationId) {
        api_GET_EventsManagementDelegationId(this.UserType.delegationId)
          .then(res => {
            this.userTeamInfo = res;
          })
          .catch(
            error => {
              this.$message({ type: 'error', message: `获取团体信息失败 ${error.error.message}` });
            }
          );
      } else {
        console.log('UserType中缺失delegationId');
      }
    },
    // 申请分站赛成功后，将VO传递过去.方便后面数据展示。
    onCompetitionRequestSuccess (vo) {
      this.competitionRequestSuccessVO = vo;
    },
    // 执行上一步
    doPrevStep () {
      if (this.stepActive <= 0) {
        return false;
      }
      this.stepActive--;
      return true;
    },
    // 执行下一步
    doNextStep () {
      if (this.stepActive >= this.stepMaxLen) {
        return false;
      }
      this.stepActive++;
      return true;
    }
  }
};
</script>

<style lang="scss" scoped>
  .game_page {
    position: relative;
    min-height: 572px;
    padding: 20px 60px;
  }
  .confirmInfo_title {
    position: relative;
    height: 32px;
    margin-bottom: 24px;
    line-height: 32px;
    font-size: 18px;
    font-weight: bold;
    color: #353434;
  }
  .confirmInfo_title::after {
    display: block;
    content: "";
    position: absolute;
    left: -18px;
    top: 0;
    width: 6px;
    height: 32px;
    border-radius: 4px;
    background-color: #E02020;
  }
  .step_mb {
    margin-bottom: 20px;
  }

  .component_wrap {
    min-height: 572px;
  }
</style>
